<template>
	<view class="wrapper">
		<view class="user-bg">
			<image src="../../static/images/data-bg.png" mode="widthFix" class="user-img"></image>
		</view>
		<custom-nav-bar :opacityVal="opacityVal" :titleName="'数据统计'" :titleColor="'#000'"></custom-nav-bar>
		<view :style="{height: `${customBar}px`}"></view>	
		<scroll-view scroll-y="true" class="main-content" :style="{'height': `calc(100vh - ${customBar}px)`}">
			<view class="player-info-box">
				<view class="player">
					<view class="avatar-box">
						<image :src="userAvatarUrl" mode="aspectFit" class="user-avatar" v-if="userAvatarUrl"></image>
					</view>
					<view class="right-info">
						<view class="player-name">丁俊晖</view>
					</view>
				</view>
				<view class="data-list">
					<view class="data-item" v-for="(item, index) in battleDataList" :key="index">
						<view class="top-val">{{item.value}}</view>
						<view class="bottom-label">{{item.label}}</view>
					</view>
				</view>
			</view>
			<view class="top-nav-box">
				<view class="nav-item-box" v-for="(item, index) in navList" :key="index" @click="toNext(item)">
					<view class="nav-item">
						<image :src="item.imgUrl" mode="aspectFit" class="nav-img"></image>
						<view class="nav-text">{{item.label}}</view>
					</view>
				</view>
			</view>
			<view class="billiard-data-box">
				<view class="billiard-data">
					<view class="title center-content">
						<view class="center-title">中式台球统计</view>
					</view>
					<view class="info-content-1">
						<view class="left">
							<view class="info-item" v-for="(item, index) in chineseBilliardsList" :key="index">
								<view class="tag">
									<view class="circle" :style="{'background': item.color}"></view>
									<text>场胜数/率</text>
								</view>
								<view class="info-value">700/15%</view>
							</view>
						</view>
						<view class="right">
							<ringChart :ringValue="ringValue" :centerText="centerText"/>
						</view>
					</view>
				</view>
				<view class="billiard-data">
					<view class="title center-content">
						<view class="center-title">中式9球统计</view>
					</view>
					<view class="info-content-2">
						<view class="top-info">
							<view class="info-item" v-for="(item, index) in nineBilliardsList" :key="index">
								<view class="circle" :style="{'background': item.color}"></view>
								<text>{{item.label}}</text>
							</view>
						</view>
						<view class="bottom-chart-box">
							<view class="tips">
								<view class="tips-item" v-for="(item, index) in nineBballList" :key="index"
								:style="{'width': `${item}%`, 'color': colorList[index]}">
									{{item}}<text>%</text>
								</view>
							</view>
							<view class="bottom-chart">
								<view class="item" v-for="(item, index) in nineBballList" :key="index"
								:style="{'width': `${item}%`, 'background': colorList[index]}"></view>
							</view>
						</view>
						
					</view>
				</view>
				<view class="billiard-data">
					<view class="title">
						<view class="left-empty"></view>
						<view class="center-title">交手人数时间图</view>
						<view class="right-select">
							<view class="vs-switch">
								<view class="switch-bar" @click="toogleBar()">
									<view class="label">{{battleFilterConditionStr}}</view>
									<image src="../../static/images/data-black-down.png" mode="aspectFit" class="down"
									:class="{'switch-down-rotate': showSwitchBar, 'switch-down-rotate-reverse': !showSwitchBar}">
									</image>
								</view>
								<view class="menu" v-if="showSwitchBar"
								:class="{'menu-down': showSwitchBar}">
									<view class="item" v-for="(item, index) in battleFilterConditionList" :key="index" @click.stop="switchBarSelected(item, index)">
										{{item.label}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<barChart :barList="barList"/>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import customNavBar from "@/components/custom-nav-bar.vue"; //export default才可以？
	import ringChart from '@/components/ring-chart.vue'; 
	import barChart from '@/components/bar-chart.vue'; 
	export default {
		data() {
			const customBar	= uni.getStorageSync('CustomBar');
			const battleFilterConditionList = [{
				label: '年',
				type: 1,
			},{
				label: '月',
				type: 2,
			},{
				label: '日',
				type: 3,
			}];
			return {
				customBar,
				opacityVal: 'transparent',
				userAvatarUrl: uni.getStorageSync('userAvatarUrl'),
				showSwitchBar: false,
				battleFilterConditionStr: battleFilterConditionList[0].label,
				battleFilterConditionList: battleFilterConditionList,
				ringValue: {
					purple: 30,
					green: 50,
					orange: 20,
					red: 10,
				},
				centerText: '3000场',
				battleDataList: [{
					value: '2000',
					label: '打球场数'
				},{
					value: '4000',
					label: '中式台球'
				},{
					value: '800',
					label: '中式9球'
				},{
					value: '890',
					label: '交手人数'
				}],
				navList: [{
					imgUrl: '../../static/images/data-nav-eight.png',
					label: '中式台球数据',
					path: '../dataInformation/fullFieldRecord'
				},{
					imgUrl: '../../static/images/data-nav-nine.png',
					label: '中式9球数据',
					path: ''
				},{
					imgUrl: '../../static/images/data-nav-list.png',
					label: '交手人数列表',
					path: ''
				}],
				chineseBilliardsList: [{
					label: '场胜数/率',
					value: '700/15%',
					color: '#5470C6',
				},{
					label: '场胜数/率',
					value: '700/15%',
					color: '#FAC858'
				},{
					label: '场胜数/率',
					value: '700/15%',
					color: '#91CC75'
				},{
					label: '场胜数/率',
					value: '700/15%',
					color: '#EE6666'
				}],
				nineBilliardsList: [{
					label: '场胜数：700',
					color: '#FAC858',
				},{
					label: '局数据：1500',
					color: '#5470C6',
				},{
					label: '大金数：110',
					color: '#EE6666',
				},{
					label: '小金数：80',
					color: '#91CC75',
				},{
					label: '黄金9：110',
					color: '#045FCE',
				},{
					label: '5连胜：80',
					color: '#F0DA8C',
				}],
				barList: [{
					label: "1月",
					value: 10,
				},{
					label: "2月",
					value: 16,
				},{
					label: "3月",
					value: 15,
				},{
					label: "4月",
					value: 33,
				},{
					label: "5月",
					value: 60,
				},{
					label: "6月",
					value: 143,
				},{
					label: "7月",
					value: 160,
				},{
					label: "8月",
					value: 90,
				},{
					label: "9月",
					value: 80,
				},{
					label: "10月",
					value: 60,
				},{
					label: "11月",
					value: 80,
				},{
					label: "12月",
					value: 70,
				},],
				ringChartData: {},
				colorList: ["#FAC858","#5470C6","#EE6666","#91CC75","#045FCE","#F0DA8C"],
				nineBballList: [15, 25, 25, 10, 10, 15], //+=100即可
				columnChartState: 1,
			}
		},
		components: {
			customNavBar,
			ringChart,
			barChart,
		},
		onLoad() {
			this.userAvatarUrl = uni.getStorageSync('userAvatarUrl');
		},
		onShow() {
			this.getRingServerData();
		},
		onReady() {
			
		},
		methods: {
			toNext(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			scrollBg() {},
			toogleBar() {
				this.showSwitchBar = !this.showSwitchBar;
			},
			switchBarSelected(item, index) {
				this.battleFilterConditionStr = item.label;
				this.showSwitchBar = false;
				this.columnChartState = item.type;
			},
			getRingServerData() {
			    //模拟从服务器获取数据时的延时
				setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
						    data: [{
								"name":"一班","value":50,
							},{
								"name":"二班","value":30,
							},{
								"name":"三班","value":20,
							},{
								"name":"四班","value":18,
							},{
								"name":"五班","value":8,
							}]
						}]
					};
				    this.ringChartData = JSON.parse(JSON.stringify(res));
				}, 50);
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrapper{
		position: relative;
		background: #F1F2F6;
		@mixin font-style {
			background: $gradient-color;
			-webkit-background-clip: text;
			color: transparent;
			font-weight: bold;
		}
		.user-bg{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			.user-img{
				width: 100%;
			}
		}
		.main-content{
			
			.player-info-box{
				padding: 0 30upx;
				margin-bottom: 20upx;
				.player{
					display: flex;
					padding: 30upx 0;
					.avatar-box{
						width: 120upx;
						height: 120upx;
						margin-right: 40upx;
						position: relative;
						.user-avatar{
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							border-radius: 20upx;
						}
					}
					.right-info{
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.player-name{
							font-size: 36upx;
							color: $black-color;
							font-weight: bold;
						}
					}
				}
				.data-list{
					display: flex;
					justify-content: space-around;
					.data-item{
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						.top-val{
							@include font-style();
							font-size: 36upx;
							margin-bottom: 8upx;
						}
						.bottom-label{
							color: $gray-color;
							font-size: 26upx;
						}
					}
				}
			}
			.top-nav-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 14upx;
				.nav-item-box{
					flex: 1;
					.nav-item{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 20upx 0;
						.nav-img{
							width: 100upx;
							height: 100upx;
						}
						.nav-text{
							color: $black-color;
							border-radius: 20upx;
							font-size: 28upx;
							font-weight: 600;
						}
					}
				}
			}
			.billiard-data-box{
				padding: 20upx 30upx;
				.billiard-data{
					background: #fff;
					border-radius: 20upx;
					margin-bottom: 20upx;
					padding: 20upx;
					.title{
						display: flex;
						justify-content: space-between;
						.left-empty{
							flex: 1;
						}
						.center-title{
							text-align: center;
							color: $black-color;
							font-size: 32upx;
							font-weight: 600;
						}
						.right-select{
							flex: 1;
							display: flex;
							justify-content: flex-end;
							.vs-switch{
								position: relative;
								.switch-bar{
									display: flex;
									padding-right: 20upx;
									height: 50upx;
									line-height: 50upx;
									align-items: center;
									.label{
										text-align: right;
										width: 60upx;
										color: $black-color;
										font-size: 26upx;
										white-space: nowrap;
									}
									.down{
										width: 40upx;
										height: 40upx;
									}
									.switch-down-rotate{
										transform: rotate(180deg); /* 将图片旋转180度 */
										transition: transform 0.5s ease;
									}
									.switch-down-rotate-reverse{
										transform: rotate(0deg);
										transition: transform 0.5s ease; /* 添加过渡动画效果，持续0.5秒，缓和动画效果 */
									}
								}
								.menu{
									display: flex;
									flex-direction: column;
									background: #fff;
									border-radius: 10upx;
									position: absolute;
									top: 60upx;
									left: 32upx;
									z-index: 99;
									padding: 14upx 30upx 0 14upx;
									box-shadow: 0px 0px 10upx 6upx rgba(0, 0, 0, 0.1);
									overflow: hidden;
									// max-height: 0; /* 默认收起 */
									.item{
										font-size: 26upx;
										margin-bottom: 15upx;
									}
								}
								.menu-down{
									animation: menumove 0.2s ease 0s 1 normal;
									max-height: 200upx;
								}
								@keyframes menumove {
									0% {max-height: 0;}
									100% {max-height: 200upx;}
								}
							}
							
						}
					}
					.center-content{
						display: flex;
						justify-content: center;
					}
					.info-content-1{
						display: flex;
						align-items: center;
						padding: 20upx 10upx 0;
						.left{
							flex: 1;
							display: flex;
							flex-wrap: wrap;
							.info-item{
								width: 50%;
								margin: 18upx 0;
								display: flex;
								flex-direction: column;
								.tag{
									display: flex;
									align-items: center;
									.circle{
										width: 36upx;
										height: 18upx;
										background: #090;
										border-radius: 4upx;
										margin-right: 10upx;
									}
									text{
										font-size: 24upx;
										color: $black-color;
									}
								}
								.info-value{
									margin-top: 10upx;
									font-size: 34upx;
									font-weight: 600;
									padding-left: 44upx;
								}
							}
							
						}
						.right{
							
						}
					}
					.info-content-2{
						
						.top-info{
							display: flex;
							flex-wrap: wrap;
							margin-top: 36upx;
							.info-item{
								padding: 0 40upx;
								box-sizing: border-box;
								width: 50%;
								display: flex;
								align-items: center;
								margin-bottom: 20upx;
								.circle{
									width: 36upx;
									height: 18upx;
									background: #090;
									border-radius: 4upx;
									margin-right: 10upx;
								}
								text{
									font-size: 24upx;
									color: $black-color;
								}
							}
						}
						.bottom-chart-box{
							padding: 0 40upx;
							margin-bottom: 20upx;
							.tips{
								display: flex;
								overflow: hidden;
								margin-top: 14upx;
								.tips-item{
									font-size: 26upx;
									font-weight: 600;
									text{
										font-size: 22upx;
										font-weight: 400;
									}
								}
							}
							.bottom-chart{
								display: flex;
								height: 12upx;
								border-radius: 10upx;
								overflow: hidden;
							}
						}
						
					}
					
				}
			}
		}
		
	}

</style>
